<template>
    <SearchForm v-if="CommonStore.showSearch" :FormValue="HDStore.searchForm" :FormConfig />

    <!-- <a-input-group compact v-if="!CommonStore.showSearch" style="margin: 5px 0;" class="searchCard">
        <a-input allowClear style="width:75%" placeholder="手消液名称" v-model:value="HDStore.searchForm.disinfectName" />
        <a-button @click="HDStore.getHandDisinfectData">
            <template #icon>
                <SearchOutlined />
            </template>
</a-button>
<a-button type="primary" @click="addFormRef.open = true">
    <template #icon>
                <PlusOutlined />
            </template>
</a-button>
<a-button @click="exportFormRef.open = true">
    <template #icon>
                <VerticalAlignBottomOutlined />
            </template>
</a-button>
</a-input-group> -->

    <a-card>
        <a-spin :spinning="HDStore.loading">
            <a-table bordered :scroll :columns :pagination="HDStore.searchForm" :dataSource="HDStore.tableData"
                @change="HDStore.getHandDisinfectData">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'action'">
                        <Btn type="link" @click="ModalTableRef.open = true">使用记录</Btn>
                        <Btn type="link" @click="() => { editFormRef.open = true; HDStore.editForm = { ...record } }">编辑
                        </Btn>
                        <a-popconfirm title="此操作不可逆，是否继续？" ok-text="确定" cancel-text="取消"
                            @confirm="HDStore.delHandDisinfectData(record.disinfectName)"
                            @cancel="EventBus.emit('CancleInfo')">
                            <Btn type="link">删除</Btn>
                        </a-popconfirm>
                    </template>
                </template>
            </a-table>
        </a-spin>
    </a-card>

    <!-- 添加 -->
    <ModalForm ref="addFormRef" type="add" :okFn="HDStore.addHandDisinfectData" :FormValue="HDStore.addForm"
        :FormConfig="addForm" :rules="addRules" />

    <!-- 添加 -->
    <ModalForm ref="editFormRef" type="edit" :okFn="HDStore.editHandDisinfectData" :FormValue="HDStore.editForm"
        :FormConfig="editForm" :rules="editRules" />

    <!-- 导出 -->
    <ModalForm ref="exportFormRef" type="export" :okFn="HDStore.exportHandDisinfectData" :FormValue="HDStore.exportForm"
        :FormConfig="exportForm" :rules="exportRules" />

    <!-- 使用记录 -->
    <ModalTableCom ref="ModalTableRef" width="18rem" okText="导出全部数据" :columns="columnsInfo"
        :pagination="HDStore.searchInfoForm" :dataSource="HDStore.tableInfoData"
        :okFn="HDStore.exportHandDisinfectUseDataUse" :changeFn="HDStore.getHandDisinfectDataUse"
        :cancelFn="() => { HDStore.searchInfoForm.pageNo = 1; HDStore.searchInfoForm.current = 1 }"
        @open="HDStore.getHandDisinfectDataUse">

    </ModalTableCom>
</template>
<script lang='ts' setup>
import { SearchOutlined, PlusOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons-vue'
import { provide, ref, inject, type Ref, onUnmounted } from 'vue'
import { searchConfig, addConfig, editConfig, exportConfig, columns, columnsInfo } from '@/config/HandDisinfect'
import { useHandDisinfect } from '@/stores/HandDisinfect'

import { createForm } from '@/utils/CreateForm'
import { createBtns } from '@/utils/createPermissionBtns'

import EventBus from '@/utils/EventBus'
import { debounce } from 'lodash'
import { useTableScroll } from '@/utils/GetTableScroll'
import { useCommon } from '@/stores/Common';

const CommonStore = useCommon()

const { FormConfig } = new createForm(searchConfig, { labelAlign: 'right', layout: 'inline', labelCol: { span: 6 } },)
const { FormConfig: addForm, FormRules: addRules } = new createForm(addConfig)
const { FormConfig: editForm, FormRules: editRules } = new createForm(editConfig)
const { FormConfig: exportForm, FormRules: exportRules } = new createForm(exportConfig)

const HDStore = useHandDisinfect()

HDStore.getHandDisinfectData()

const addFormRef = ref()
const editFormRef = ref()
const exportFormRef = ref()
const ModalTableRef = ref()

const scroll = useTableScroll('searchCard')

provide('permissionBtns', createBtns({
    query: debounce(() => { HDStore.searchForm.pageNo = 1; HDStore.getHandDisinfectData() }, 1000),
    add: () => addFormRef.value.open = true,
    exportAll: () => exportFormRef.value.open = true
}))

onUnmounted(() => {
    HDStore.$reset()
})

</script>
<style lang='scss' scoped></style>